<template>
  <view
    class="group-ranking"
    :style="`background-image: url(${group_ranking_bg});`"
  >
    <CustomHeader :class="{ headWhite: headWhite }" />
    <scroll-view
      class="group-ranking-scroll"
      :scroll-y="true"
      @scroll="scrollList"
    >
      <view class="group-ranking-scroll_wrap">
        <view>
          <MainTabs
            :main-type="mainType"
            main="总榜"
            sub="日榜"
            @change="handleMainType"
          />
        </view>
        <SemicircleButton text="排行规则" :handle-tap="handleRule" />
        <view v-if="is_have_group" class="personal-ranking-wrap">
          <border-box
            :inside-padding="16"
            bd-color="#CB9064"
            bg-color="#FFFBEA"
          >
            <cloud-title :width="460">
              {{ name }}
            </cloud-title>
            <view class="personal-ranking">
              <view class="side">
                <view class="num">
                  {{ ranking }}
                </view>
                <view class="text"> 排名 </view>
              </view>
              <view class="center" />
              <view class="side">
                <view class="num">
                  {{ petal_nums }}
                </view>
                <view class="text"> 花瓣 </view>
              </view>
            </view>
          </border-box>
        </view>
        <border-box
          class="list-wrap"
          :inside-padding="16"
          bd-color="#FFFDF9"
          bg-color="#FFFDF9"
        >
          <view class="top-tips"> 实时数据 </view>
          <view v-for="(n, i) in rank_list" :key="i" class="list-item">
            <view class="left">
              <image
                v-if="i < 3"
                :lazy-load="true"
                class="ranking-img"
                :src="rankImgList[i]"
              />
              <view v-else class="ranking">
                {{ i + 1 }}
              </view>
              <view class="name">
                {{ n.name }}
              </view>
            </view>
            <view class="right">
              <image :lazy-load="true" class="petal" :src="petal_img" />
              <view class="num">
                {{ n.petal_nums }}
              </view>
            </view>
          </view>
          <ranking-empty
            v-if="!rank_list.length"
            text="暂无排行，明天再来看看吧～"
          />
          <view class="modal"></view>
        </border-box>
      </view>
    </scroll-view>
    <!-- <view v-if="hideList" class="view-more">
      <view class="mask" />
      <view class="text" @tap="handleMore">
        查看更多排名<AtIcon
          class="icon"
          value="chevron-down"
          size="16"
          color="#303133"
        />
      </view>
    </view> -->
    <view class="want-add-wrap">
      <finish-button
        class="want-add"
        v-if="!is_have_group"
        :width="690"
        @click="handleAdd"
      >
        我要参与
      </finish-button>
    </view>
    <action-sheet
      class="ranking-modal"
      :is-opened-modal.sync="isOpenedModal"
      :height="888"
      :catchtouchmove="true"
    >
      <!-- <view
        class="modal-title"
        :style="{ 'background-image': `url(${activity_title_bg})` }"
      >
        排行规则
      </view> -->
      <cloud-title :width="342"> 排行规则 </cloud-title>
      <view class="rule-modal">
        <view v-for="n in ruleList" :key="n.id">
          {{ `${n.id}.${n.content}` }}
        </view>
      </view>
    </action-sheet>
  </view>
</template>

<script>
import "./index.scss";
import Taro from "@tarojs/taro";
import borderBox from "_c/border-box/index";
import SpecialBox from "_c/special-box/index.vue";
import MainTabs from "_c/main-tabs/index.vue";
// import MainTabs from "_c/main-tabs/index.vue";
import CustomHeader from "_c/custom-header/index.vue";
import SemicircleButton from "_c/semicircle-button/index.vue";
import { DEFAULT_IMG } from "@/config/clock-calendar";
import { getCurrentInstance } from "@tarojs/taro";
import contactTeacher from "_c/contact-teacher/index";
import rankingEmpty from "_c/ranking-empty/index";
import { handleJudgeIsLogin } from "@/libs/util";

import {
  group_ranking_bg,
  activity_title_bg,
  theme_sort,
  petal_img,
  champion,
  runner_up,
  second_runner_up
} from "@/libs/image-url";
import { AtIcon } from "taro-ui-vue";
import actionSheet from "@/components/action-sheet/index";
import globalData from "@/libs/globalData";
import finishButton from "@/components/finish-button/index";
import cloudTitle from "@/components/cloud-title/index";
import { activityGroupsRank, illustrate } from "_api/ranking";

export default {
  name: "GroupRanking",
  components: {
    CustomHeader,
    MainTabs,
    SemicircleButton,
    borderBox,
    AtIcon,
    actionSheet,
    finishButton,
    cloudTitle,
    rankingEmpty
  },
  data() {
    return {
      group_ranking_bg,
      activity_title_bg,
      theme_sort,
      DEFAULT_IMG,
      petal_img,
      rankImgList: [champion, runner_up, second_runner_up],
      MBHeight: 0,
      MBTop: 0,
      clockLog: [],
      headWhite: false,
      mainType: 0,
      isOpenedModal: false,
      isOpenedSort: false,
      hideList: true,
      is_have_group: 0,
      is_on_list: 0,
      name: "",
      ranking: 0,
      petal_nums: 0,
      rank_list: [],
      ruleList: []
    };
  },
  created() {
    this.MBHeight = globalData.getData("MBHeight");
    this.MBTop = globalData.getData("MBTop");
  },
  onLoad(opt) {
    this.activity_id = opt.activity_id;
    this.getInfo();
  },
  methods: {
    getInfo() {
      let obj = {
        activity_id: this.activity_id,
        type: this.mainType
      };
      activityGroupsRank(obj).then(r => {
        this.rank_list = [];
        Object.assign(this.$data, r.data);
        !this.rank_list.length && (this.hideLis = true);
      });
    },
    handleMainType(type) {
      if (this.mainType === type) {
        return;
      }
      this.mainType = type;
      this.getInfo();
    },
    handleRule() {
      if (!this.ruleList.length) {
        illustrate().then(r => {
          this.ruleList = r.data;
          this.isOpenedModal = true;
        });
      } else {
        this.isOpenedModal = true;
      }
    },
    handleClose() {
      this.isOpenedModal = false;
    },
    scrollList({ detail: { scrollTop } }) {
      this.headWhite = scrollTop > 20;
    },
    handleAdd() {
      const hasAuth = handleJudgeIsLogin();
      if (!hasAuth) return;
      Taro.navigateBack({
        delta: 1
      });
    },
    handleMore() {
      this.hideList = false;
    }
  }
};
</script>
